<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="link/heat.jsp" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/wu.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/icon.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript">
    if ("${msg}" != "") {
        alert(${msg})
    }

    //全选复选框功能实现
    function allClick() {
        //取得全选复选框的选中未选 中状态
        //获得当前点击后全选按钮的状态
        var ischeck = $("#all").prop("checked");
        //将此状态赋值给每个商品列表里的复选框
        $("input[name=ckcar]").each(function () {
            //赋值选中或者非选中状态
            this.checked = ischeck;
        });
    }

    //单个复选框点击改变全选复选框功能实现
    function ckClick() {
        //取得所有name=ck的被选中的复选框
        var length = $("input[name=ckcar]:checked").length;//:checked 过滤只有是被选中的复选框
        //取得所有name=ck的复选框
        var len = $("input[name=ckcar]").length;
        //进行对比,改变全选复选框的状态
        if (len == length) {
            $("#all").prop("checked", true);
        } else {
            $("#all").prop("checked", false);
        }
    }

    //批量删除
    function deleteBatch(page) {
        //alert(page)
        //取得所有被选中复选框的删除商品的pid
        var cks = $("input[name=ckcar]:checked");
        var str = "";
        var id = "";
        if (cks.length == 0) {//没有选中商品
            alert("请选择将要删除的商品！");
        } else {
            // 有选中的商品，则取出每个选 中商品的ID，拼提交的ID的数据
            if (confirm("您确定删除" + (cks.length) + "条商品吗？")) {

                //拼接ID
                $.each(cks, function (index, item) {
                    //进行提交商品 id的字符串的拼接
                    id = $(item).val(); //每一个被选中的商品id 22 33
                    //alert(id);
                    //进行非空判断,避免出错
                    if (id != null) {
                        str += id + ",";  //22,33,44,
                    }
                });

                //alert(str);
                //发送请求到服务器端
                //window.location = "<%--${pageContext.request.contextPath}--%>/prod/deleteBatch.action?str=" + str;
                //发送 ajax请求,进行批量删除的提交
                $.ajax({
                    url: "${pageContext.request.contextPath}/car/deleteBatch.action",
                    data: {"carIds": str},
                    type: "post",
                    dataType: "text",
                    success: function () {
                        alert("删除成功");//批量删除成功!失败!不可删除
                        //将页面上显示商品数据的容器重新加载
                        window.location.reload();
                    },
                    error: function () {
                        alert("删除失败")
                    }
                })
            }
        }
    }
</script>

<div id="toolbar">
    <a href="${pageContext.request.contextPath}/template/carview/car-addition.jsp" class="easyui-linkbutton"
       style="color: deepskyblue" iconCls="icon-add" plain="true"
    <%--onclick="newCustomer()"--%>>添加车辆</a>

    <input type="button" class="btn btn-warning" id="btn1"
           value="批量删除" onclick="deleteBatch()">
</div>
<table class="easyui-datagrid" title="客户列表" toolbar="#toolbar" style="width:100%;"
       rownumbers="true" id="table">
    <thead>
    <tr>
        <th data-options="field:'select'" width="9%">
            <input type="checkbox" id="all" onclick="allClick()">全选
        </th>
        <%--  <th data-options="field:'code'"  width="8%">序号</th>--%>
        <th data-options="field:'number'" width="11%">车牌号</th>
        <th data-options="field:'name'" width="9%">品牌</th>
        <th data-options="field:'color'" width="9%">颜色</th>
        <th data-options="field:'price'" width="9%">购买价格</th>
        <th data-options="field:'time'" width="12%">进货时间</th>
        <th data-options="field:'count'" width="6%">座位</th>
        <th data-options="field:'states'" width="9%">状态</th>
        <th data-options="field:'photo'" width="15%">描述</th>
        <th data-options="field:'operator'" width="10%">操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${sessionScope.carPageInfo.list}" var="car" varStatus="i">
        <tr>
            <td valign="center" align="center"><input type="checkbox" name="ckcar"
                                                      value="${car.carId}" onclick="ckClick()"></td>

                <%--<td>${i.index}</td>--%>
            <td>${car.carNumber}</td>
            <td>${car.carLogo}</td>
            <td>${car.carColor}</td>
            <td>${car.carPrice}</td>
            <td><fmt:formatDate value="${car.carTime}" pattern="yyyy-MM-dd"/></td>
            <td>${car.carZuo}</td>
            <td> <%--1 未租，2 已租,3 不可以--%>
                <c:if test="${car.carStatus==1}">
                    未租
                </c:if> <c:if test="${car.carStatus==2}">
                    已租
                </c:if> <c:if test="${car.carStatus==3}">
                    不可以
                </c:if>
            </td>
            <td><img src="${car.carPhoto}" width="250px" height="100px"></td>
            <td>
                <a href="${pageContext.request.contextPath}/car/getOne.action?carId=${car.carId}"
                   class="easyui-linkbutton" iconCls="icon-edit" plain="true"
                >修改</a>
                <a href="${pageContext.request.contextPath}/car/deleteOne.action?carId=${car.carId}"
                   class="easyui-linkbutton" iconCls="icon-remove" plain="true"
                >删除</a>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<%--分页--%>
<nav aria-label="Page navigation">
    <ul class="pagination">

        <c:if test="${carPageInfo.hasPreviousPage}">
            <li>
                <a href="${pageContext.request.contextPath}/car/allPage.action?pageNum=${carPageInfo.pageNum-1}"
                   aria-label="Previous" disabled="disabled">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        </c:if>
        <c:if test="${ !carPageInfo.hasPreviousPage}">
            <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        </c:if>


        <c:if test="${not empty sessionScope.carPageInfo}">
            <c:forEach begin="1" end="${carPageInfo.pages}" var="i">
                <c:if test="${carPageInfo.pageNum==i}">
                    <li class="active">
                        <a href="${pageContext.request.contextPath}/car/allPage.action?pageNum=${i}">${i} <span
                                class="sr-only">(current)</span></a>
                    </li>
                </c:if>
                <c:if test="${carPageInfo.pageNum!=i}">
                    <li><a href="${pageContext.request.contextPath}/car/allPage.action?pageNum=${i}">${i}</a></li>
                </c:if>
            </c:forEach>
        </c:if>

        <c:if test="${carPageInfo.hasNextPage}">
            <li>
                <a href="${pageContext.request.contextPath}/car/allPage.action?pageNum=${carPageInfo.pageNum+1}">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </c:if>
        <c:if test="${! carPageInfo.hasNextPage}">
            <li class="disabled"><a href="#" aria-label="Previous" disabled="disabled"><span
                    aria-hidden="true">&raquo;</span></a></li>
        </c:if>
    </ul>
</nav>

</body>

</html>